<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <title>Google Earth Plug-in Driving Simulator</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  <script type="text/javascript" src="http://www.google.com/jsapi?hl=en&key=ABQIAAAAveCD76jBlIVnkXx3FF4c5hQh_EXt2nVYv1GZRdRodwSWvcsrdRTOeT7TXlM37PZYDDuRdE44QhDf9A"></script>
  <style type="text/css">@import "http://earth-api-samples.googlecode.com/svn/trunk/demos/drive-simulator/index.css";</style>
  <script type="text/javascript" src="http://earth-api-samples.googlecode.com/svn/trunk/lib/geplugin-helpers.js"></script>
  <script type="text/javascript" src="http://earth-api-samples.googlecode.com/svn/trunk/lib/math3d.js"></script>
  <script type="text/javascript" src="http://earth-api-samples.googlecode.com/svn/trunk/demos/drive-simulator/simulator.js"></script>
  <script type="text/javascript" src="http://earth-api-samples.googlecode.com/svn/trunk/demos/drive-simulator/index.js"></script>
<script type="text/javascript">
// <![CDATA[

var DS_ge;
var DS_geHelpers;
var DS_map;

google.load("jquery", "1");
google.load("maps", "2.x");
google.load("earth", "1");

function DS_init() {
  $('#directions-form input').attr('disabled', 'disabled');
  $('#simulator-form input').attr('disabled', 'disabled');
  
  google.earth.createInstance(
    'earth',
    function(ge) {
      DS_ge = ge;
      DS_ge.getWindow().setVisibility(true);
      DS_ge.getLayerRoot().enableLayerById(DS_ge.LAYER_BUILDINGS, true);
      DS_ge.getLayerRoot().enableLayerById(DS_ge.LAYER_BORDERS, true);
      DS_geHelpers = new GEHelpers(DS_ge);
      
      DS_ge.getNavigationControl().setVisibility(ge.VISIBILITY_AUTO);
      
      DS_map = new GMap2($('#map-container').get(0));
      DS_map.setCenter(new GLatLng(37.4419, -122.1419), 13);
      DS_map.addControl(new GSmallMapControl());
      DS_map.enableContinuousZoom();
      
      $('#directions-form input').removeAttr('disabled');
    },
    function() {
      alert('Google earth loading failed!');
    });

  function onresize() {
    var clientHeight = document.documentElement.clientHeight;

    $('#route-details, #earth-container, #map-container').each(function() {
      $(this).css({
        height: (clientHeight - $(this).position().top - 100).toString() + 'px' });      
    });
  }
  
  $(window).resize(onresize);
  onresize();
}

google.setOnLoadCallback(DS_init);

// ]]>
</script>
</head>
<body onunload="GUnload();">
<h1>自驾游模拟演示</h1>
<table style="width: 100%; height: 400px;">
<tr>
  <td style="width: 300px" valign="top">
    <table style="width: 300px">
      <tr>
        <td style="width: 50%" valign="top">
          <form id="directions-form" onsubmit="return false;" action="get">
            <fieldset>
              <legend>起止地点</legend>
              从:<br/>
              <input type="text" id="from" value="San Francisco"/><br/>
              到:<br/>
              <input type="text" id="to" value="Emeryville"/><br/>
              <input type="submit" onclick="DS_goDirections();" id="go" value="Go!"/>
            </fieldset>
          </form>
        </td>
        <td style="width: 50%" valign="top">
          <form id="simulator-form" onsubmit="return false;" action="get">
            <fieldset>
              <legend>模拟汽车</legend>
              <input type="button" onclick="DS_controlSimulator('reset');" value="重置	"/><br/>
              <input type="button" onclick="DS_controlSimulator('start');" value="开车"/><br/>
              <input type="button" onclick="DS_controlSimulator('pause');" value="停车"/><br/>
              速度: <strong><span id="speed-indicator">1x</span></strong><br/>
              <input type="button" onclick="DS_controlSimulator('slower');" value="-"/>
              <input type="button" onclick="DS_controlSimulator('faster');" value="+"/>
            </fieldset>
          </form>
        </td>
      </tr>
    </table>
    <div id="route-details"></div>
  </td>
  <td style="width: 67%" valign="top">
    <div id="earth-container" style="border: 1px solid #000; height: 500px;">
      <div id="earth" style="height: 100%;"></div>
    </div>
    <div id="status"></div>
  </td>
  <td style="width: 33%" valign="top">
    <div id="map-container" style="border: 1px solid #000; height: 500px;">
    
    </div>
  </td>
</tr>
</table>


</body>
</html>
